<template>
  <div class="icons">
    <div class="icon" >
      <div class="img-icon" @click="create_room">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
    <div class="icon" @click="enter_room">
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">加入会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">我的会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
    <div class="icon" >
      <div class="img-icon">
        <img class="img_icon_item" src="https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64">
      </div>
      <p class="icon-desc">创建会议</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Icon',
  data () {
    return {
      iconList: [{
        id: '001',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216399&size=64',
        desc: '创建会议'
      }, {
        id: '002',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216417&size=64',
        desc: '加入会议'
      }, {
        id: '003',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216404&size=64',
        desc: '周边会议'
      }, {
        id: '004',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216402&size=64',
        desc: '收藏会议'
      }, {
        id: '005',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216414&size=64',
        desc: '日程安排'
      }, {
        id: '006',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216407&size=64',
        desc: '历史会议'
      }, {
        id: '007',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216421&size=64',
        desc: '会议纪要'
      }, {
        id: '008',
        imgUrl: 'https://www.easyicon.net/api/resizeApi.php?id=1216411&size=64',
        desc: '正在直播'
      }]
    }
  },
  methods: {
    enter_room () {
      this.$router.push('/set_Events')
    },
    create_room () {
      this.$router.push('/create_room')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .icons
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 50%
    .icon
      overflow: hidden
      float: left
      width: 25%
      height: 0
      padding-bottom: 25%
      .img-icon
        .img_icon_item
          height: 100%
          display: block
          margin: 0 auto
          padding-top:.1rem
      .icon-desc
        text-align: center
        padding-top: .1rem
</style>
